Project 2: UI/UX
Overview
This project centered around designing an interface for food recalls. The objective was to design an interface for a small touch screen device that would be placed in grocery stores next to recently recalled food products. The customers could use the device to learn more about that recent recall.
Research & Testing
In order to gain a better understanding of what people prioritize when it comes to food recalls, we sought out help from our peers. I chose to ask for my roommate, Madeline Smith, for help. I cut up the official recall for St. James Smokehouse Salmon from FDA's website into different parts. The announcement, summary, FDA release date, product information, etc. I then had Madeline sort the information into how she would like to see it on the website if she were inquiring about the recall. The following photo shows how she sorted the website's parts.
As you can see, she primarily prioritized recognition of the product with things like its description, type, and photos. Second, she thought that the dates were particularly important and followed with more general information.
Our next step as a class was to lay out all of our findings and compare. We discussed how different scenarios might generate different hierarchies of importance. For example, if the information is directly on the shelf next to the product, it might not be as important to display photos as if it were simply on a website you were looking at.
We came up with the following wireframe as a class. The red indicates which frames will later show up on my prototype.
Next, I created my own wireframe based on the findings from my interview with Madeline as well as the class's discussion.
I then created more thorough, sketched out, versions of the wireframes above.
I showed these sketches to Madeline and took her through the process of an introduction, orientation, revealing of the home screen, first impressions, task objective and reflection. She reacted very positively to the idea of a timeline, stating that it would be visually pleasing and efficient. She also recommended using red, yellow, and green for different messages once I started to design more thoroughly.
UI Design
Finally, I began to work on XD, designing a simple yet pleasing interface that everyone at the grocery store could use without issue. After a slow learning curve with Adobe XD and many revisions, I produced a design I am proud of. I chose to highlight the company information and timeline because they were two aspects that kept coming up in my research. I also wanted to highlight the fact that the food on the shelf was safe to consume so as not to deter customers from purchasing the item. The rest of the information, while still important, was not a priority in my research. Therefore I included the full FDA recall so that the information was still there and visually pleasing, yet wasn't as clear cut as the company information and timeline. The following is a recording of how one might use the interface and the link to the Adobe XD prototype.
